<template>
  <div>
    <User v-for="(item,index) in AppList" :key="index" :item='item' @delete="deleteOne(item.user_id,index)"></User>
    <el-row class="option">
      <el-col :span="24" class="people">
        <span>一次抽取</span>
        <input type="text" class="num" value="num" v-model="num" readonly>
        <span>人</span>
      </el-col>
      <el-col :span="24" class="jiangxiang">
        <span>选择奖项</span>
        <el-select
          class="jiangxiang-el-select"
          v-model="prize"
          size="small"
          placeholder="---"
          @change="onPrizeChange"
        >
          <el-option v-for="item in prizeList" :key="item.id" :label="item.name" :value="item"></el-option>
        </el-select>
        <span style="opacity: 0;">奖</span>
      </el-col>
    </el-row>
    <el-row>
      <!-- <el-button>默认按钮</el-button> -->
      <el-button type="primary" @click="triggerLottory">{{lt}}</el-button>
    </el-row>
  </div>
</template>

<script>
import api from "@/api";
import User from "@/components/UserItemSp"
export default {
  components:{
    User
  },
  data() {
    return {
      AppList: [],
      prizeList: [],
      num:0,
      prize:null,
      LotteryText:['开始抽奖','停止抽奖'],
      lt:'开始抽奖',
      ltFlag:false
    }
  },
  mounted() {
    this.$root.$on("lottoryResult", this.getList);
    api.getPrize({}).then(data => {
      if (data.code) {
        this.$message(data.message);
        return;
      }
      data = data.data;
      this.prizeList = data.list;
    });
  },
  beforeDestroy() {
    this.$root.$off('lottoryResult')
  },
  methods: {
    triggerLottory() {
      this.ltFlag = !this.ltFlag
      this.$root.$emit('sendMsg', 'lottory');
      if(!this.ltFlag){
        this.lt = this.LotteryText[0]
      }else{
        this.lt = this.LotteryText[1]
      }
      
    },
    getList(result) {
      this.AppList = result
      console.log(result);
    },
    onPrizeChange(item) {
      this.$root.$emit('sendMsg', 'setPrize',item);
      if (item.num) {
        this.num = item.num;
      }
      // this.newCurrentItem(this.num);
    },
    deleteOne(id,index){
      this.AppList.splice(index,1)
      this.$root.$emit('sendMsg', 'deleteOne',{id:id,index:index});
    }
  }
}
</script>

<style scoped>
button {
  width: 200px;
  height: 40px;
}
.item{
  width: 150px!important;height: 200px;
}
</style>
